<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .custom-file-upload {
            position: relative;
            display: inline-block;
        }

        .custom-file-upload input[type="file"] {
            display: none;
        }

        .custom-file-upload label {
            display: inline-block;
            padding: 6px 12px;
            cursor: pointer;
            background-color: #007bff;
            color: #fff;
            border-radius: 4px;
        }

        .custom-file-upload label:hover {
            background-color: #0056b3;
        }

    </style>
</head>
<body>
<div class="custom-file-upload">
    <input type="file" id="file-input" class="file" name="file" @change="change"/>
    <label for="file-input">选择文件</label>
</div>

<input type="file" accept="image/*" @change="changeFile">


<script>

    /* 上传图片操作 */
    function changeFile(event) {
        /* 获取到你选择的文件 */
        let file = event.target.files[0];

        /* 限制文件上传类型 */
        let suffixName = file.name.substring(file.name.lastIndexOf('.') + 1);   /* 得到文件后缀名 */
        if (suffixName !== 'jpg' && suffixName !== 'png') {
            this.$message.warning("上传文件只能是 jpg、png 格式!");
            return;
        }

        /* 限制文件上传大小 */
        let isLtSize = file.size / 1024 / 1024 < 10;
        if (!isLtSize) {
            this.$message.warning("上传文件不能超过 10MB!");
            return;
        }

        /* 上传文件必须要用 formData 构造条件去构造请求参数 */
        let formData = new FormData();
        formData.append('file', file);

        /* 调用后台上传图片的接口 */
        uploadFile(formData).then(res => {
            // res 就是你图片上传成功后的返回值
            // 拼接上你的项目地址就能成功访问到图片地址了
            console.log("上传图片操作", res.url);
        });
    }


    function changeFile(e){
        console.log('aaaaaaaaaaa:' , e )
    }

</script>
</body>
</html>
